@import "../config";
@import "../color";
@import "../mixin";

.input-group {
  line-height: @input-line-height;
  font-size: @small-font-size;
  margin-bottom: 15px;
  &.big {
    line-height: @big-input-line-height;
  }
  &.small {
    line-height: @small-input-line-height;
  }
}

.btn {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  outline: none;
  transition: .1s;
  font-weight: 500;
  user-select: none;
  border-radius: @smallest-border-radius;
  font-size: @small-font-size;
  height: @input-line-height;
  border: 0 solid;
  margin: 0;
  padding: 0 1.5em;
  text-decoration: none;
  vertical-align: top;
  max-width: 100%;
  .color(@color,@font-color) {
    background-color: @color;
    border-color: @color;
    color: @font-color;
    &.flat {
      background-color: transparent;
      border-color: transparent;
      color: @color
    }
    &.outline {
      background-color: transparent;
      border-color: @color;
      color: @color
    }
    &.disabled {
      background-color: @font-color-dark-line;
      border-color: @font-color-dark-line;
      color: @font-color-dark-disabled;
      cursor: not-allowed;
      &:hover:before {
        background-color: transparent;
      }
    }
  }
  &:before {
    border-radius: inherit;
    color: inherit;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.12;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    width: 100%;
    height: 100%;
  }
  &:hover:before {
    background-color: currentColor;
  }
  &.block {
    display: block;
    width: 100%;
  }
  &.big {
    height: @big-input-line-height;
    font-size: @default-font-size;
    padding: 0 2em;
  }
  &.small {
    height: @small-input-line-height;
    font-size: @smallest-font-size;
    padding: 0 1em;
  }
  &.round {
    border-radius: @input-line-height;
    &.big {
      border-radius: @big-input-line-height;
    }
    &.small {
      border-radius: @small-input-line-height;
    }
  }
  &.icon {
    width: @input-line-height;
    height: @input-line-height;
    border-radius: 50%;
    padding: 0;
    .icon {
      font-size: @medium-font-size;
    }
    &.big {
      .icon {
        font-size: @big-font-size;
      }
      width: @big-input-line-height;
      height: @big-input-line-height;
    }
    &.small {
      .icon {
        font-size: @default-font-size;
      }
      width: @small-input-line-height;
      height: @small-input-line-height;
    }
  }
  &.outline {
    border-width: @input-border-size;
    &.disabled {
      border-width: 0;
    }
  }
  &.shadow {
    .card-box-shadow()
  }
  &:hover {
    text-decoration: none;
  }

  .content {
    align-items: center;
    border-radius: inherit;
    color: inherit;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    white-space: nowrap;
    width: 100%;
    height: 100%;
    .ellipsis();
    [type=file] {
      display: none;
    }
  }

  &.default-color {
    .color(@light, @font-color-dark);
    &.flat {
      color: @font-color-dark
    }
  }
  &.primary-color {
    .color(@theme-color, white)
  }
  &.red-color {
    .color(@red, white)
  }
  &.white-color {
    .color(white, @theme-color);
    &.flat {
      color: @theme-color
    }
  }
}

.input {
  width: 200px;
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  outline: none;
  transition: .1s;
  font-weight: 500;
  user-select: none;
  border-radius: @smallest-border-radius;
  border: @input-border-size solid @font-color-dark-line;
  font-size: @small-font-size;
  margin: 0;
  height: @input-line-height;
  background-color: white;
  vertical-align: top;
  overflow: hidden;
  .input-inner {
    flex:1;
    height: 100%;
    display: flex;
    padding: 0;
    &:disabled{
      background-color: transparent;
      cursor: not-allowed;
    }
  }
  .placeholder{
    padding:0 @input-padding / 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
  }
  .color(@color,@font-color) {
    border-color: @font-color-dark-line;
    color: @font-color;
    &.input-focus{
      border-color:@color
    }
  }
  &.disabled {
    border-width: 0;
    color: @font-color-dark-disabled;
    background-color: @font-color-dark-line;
    cursor: not-allowed;
  }
  &.block {
    display: flex;
    width: 100%;
  }
  &.big {
    height: @big-input-line-height;
    font-size: @default-font-size;
    .placeholder{
      padding: 0 @big-input-padding / 2;
    }
  }
  &.small {
    height: @small-input-line-height;
    font-size: @smallest-font-size;
    .placeholder{
      padding: 0 @small-input-padding / 2;
    }
  }
  &.textarea {
    white-space: inherit !important;
    height: auto;
    .input-inner {
      line-height: @input-line-height;
      resize : none;
    }
    &.big {
      line-height: @big-input-line-height;
    }
    &.small {
      line-height: @small-input-line-height;
    }
  }
  &.shadow {
    border-width: 0;
    .card-box-shadow()
  }

  &.default-color {
    .color(@font-color-dark-line, @font-color-dark);
  }
  &.primary-color {
    .color(@theme-color, @font-color-dark)
  }
}
.checkbox {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
  height: @input-line-height;
  .color(@font-color) {
    color: @font-color;
    .switch-box.active {
      &:before {
        background-color: @font-color;
      }
      .checkbox-inner {
        .icon {
          background-color: @font-color;
        }
      }
    }
    &.disabled {
      cursor: not-allowed;
      color: @font-color-dark-disabled;
    }
  }
  .checkbox-inner {
    display: inline-block;
    width: @input-line-height;
    height: @input-line-height;
    border-radius: 50%;
    .icon {
      font-size: @medium-font-size;
    }
    .content {
      align-items: center;
      border-radius: inherit;
      color: inherit;
      display: flex;
      flex: 1 0 auto;
      justify-content: center;
      margin: 0 auto;
      position: relative;
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      white-space: nowrap;
      width: inherit;
      height: inherit;
      .ellipsis()
    }
  }
  .switch-box(@height) {
    @width: @height * 1.5;
    width: @width;
    &:before {
      height: @width / 4;
      width: @width / 2;
      border-radius: @height;
    }
    .checkbox-inner {
      .icon {
        width: @height / 2;
        height: @height / 2;
        .card-box-shadow()
      }
    }
    &.active {
      .checkbox-inner {
        transform: translateX(@width - @height);
      }
    }
  }
  .switch-box {
    position: relative;
    height: inherit;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    .switch-box(@input-line-height);
    &:before {
      content: " ";
      background-color: @font-color-dark-fade;
      opacity: .7;
    }
    .checkbox-inner {
      position: absolute;
      top: 0;
      left: 0;
      right: auto;
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      .icon {
        border-radius: 50%;
        background-color: white;
        .card-box-shadow()
      }
    }
  }
  .checkbox-label {
    display: inline-flex;
    align-items: center;
    vertical-align: inherit;
    height: inherit;
    padding-right: @input-line-height / 3;
  }
  .checkbox-original {
    display: none;
  }
  &.disabled {
    .switch-box {
      &:after {
        content: " ";
        background-color: @font-color-light-disabled;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
  &.big {
    height: @big-input-line-height;
    font-size: @default-font-size;
    .checkbox-inner {
      width: @big-input-line-height;
      height: @big-input-line-height;
      .icon {
        font-size: @big-font-size;
      }
    }
    .checkbox-label {
      padding-right: @big-input-line-height / 3;
    }
    .switch-box {
      .switch-box(@big-input-line-height);
    }
  }
  &.small {
    height: @small-input-line-height;
    font-size: @smallest-font-size;
    .checkbox-inner {
      width: @small-input-line-height;
      height: @small-input-line-height;
      .icon {
        font-size: @default-font-size;
      }
    }
    .checkbox-label {
      padding-right: @small-input-line-height / 3;
    }
    .switch-box {
      .switch-box(@small-input-line-height);
    }
  }
  &.not-line {
    border-width: 0;
  }

  &.default-color {
    .color(@font-color-dark);
  }
  &.primary-color {
    .color(@theme-color)
  }
}

.radio {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
  height: @input-line-height;
  .color(@font-color) {
    color: @font-color;
    &.disabled {
      cursor: not-allowed;
      color: @font-color-dark-disabled;
    }
  }
  .radio-inner {
    display: inline-block;
    width: @input-line-height;
    height: @input-line-height;
    border-radius: 50%;
    .icon {
      font-size: @medium-font-size;
    }
    .content {
      align-items: center;
      display: flex;
      flex: 1 0 auto;
      justify-content: center;
      border-radius: inherit;
      color: inherit;
      margin: 0 auto;
      position: relative;
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      white-space: nowrap;
      width: inherit;
      height: inherit;
      .ellipsis()
    }
  }
  .radio-label {
    height: inherit;
    display: inline-flex;
    align-items: center;
    vertical-align: inherit;
    padding-right: @input-line-height / 3;
  }
  .radio-original {
    display: none;
  }
  &.big {
    height: @big-input-line-height;
    font-size: @default-font-size;
    .radio-inner {
      width: @big-input-line-height;
      height: @big-input-line-height;
      .icon {
        font-size: @big-font-size;
      }
    }
    .radio-label {
      padding-right: @big-input-line-height / 3;
    }
  }
  &.small {
    height: @small-input-line-height;
    font-size: @smallest-font-size;
    .radio-inner {
      width: @small-input-line-height;
      height: @small-input-line-height;
      .icon {
        font-size: @default-font-size;
      }
    }
    .radio-label {
      padding-right: @small-input-line-height / 3;
    }
  }

  &.default-color {
    .color(@font-color-dark);
  }
  &.primary-color {
    .color(@theme-color)
  }
}

.tag {
  @padding: 0.6em;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  border-radius: @smallest-border-radius;
  line-height: @tag-line-height;
  padding: 0 @padding;
  font-size: @small-font-size;
  vertical-align: top;
  text-align: center;
  .close {
    margin-left: @padding / 2;
    height: @tag-close-size;
    width: @tag-close-size;
    line-height: @tag-close-size;
    transition: all @short-animate-time;
    .icon {
      font-size: @small-font-size;
    }
  }
  >.content {
    transition: all @short-animate-time;
    min-width: 3em;
  }

  .color(@color,@font-color) {
    background-color: @color;
    color: @font-color;
    i {
      color: @font-color;
    }
  }

  &.big {
    @padding: 0.6em;
    line-height: @big-tag-line-height;
    font-size: @default-font-size;
    padding: 0 @padding;
    >.content{
      min-width: 3.5em;
    }
    >.close {
      margin-left: @padding / 2;
      height: @big-tag-close-size;
      width: @big-tag-close-size;
      line-height: @big-tag-close-size;
      .icon {
        font-size: @default-font-size;
      }
    }
  }
  &.small {
    @padding: 0.8em;
    line-height: @small-tag-line-height;
    font-size: @smallest-font-size;
    padding: 0 @padding;
    >.content{
      min-width: 2.5em;
    }
    >.close {
      margin-left: @padding / 2;
      height: @small-tag-close-size;
      width: @small-tag-close-size;
      line-height: @small-tag-close-size;
      .icon {
        font-size: @smallest-font-size;
      }
    }
  }
  &.round {
    border-radius: @tag-line-height;
    &.big {
      border-radius: @big-tag-line-height;
    }
    &.small {
      border-radius: @small-tag-line-height;
    }
  }
  &.shadow {
    .card-box-shadow()
  }
  &.clickable{
    cursor:pointer;
    user-select: none;
  }

  &.default-color {
    .color(@font-color-dark-line, @font-color-dark);
  }
  &.primary-color {
    .color(fade(@theme-color, 56), @font-color-light);
  }
}

